<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var idflag=false;
	var nicknameflag=true;
	var passwordflag=false;
	$("#updateForm").submit(function(){
		var regx = /^[a-zA-Z0-9]*$/;
		if($("#id").val()==""){
			alert("아이디를 입력하세요!");
			return false;
		}else if(!regx.test($("#id").val())){
			alert("아이디는 영어, 숫자만 입력 가능합니다");
			return false;
		}else if($("#nickname").val()==""){
			alert("닉네임을 입력하세요!");
			return false;
		}  else if(nicknameflag==false ){
    		$("#nickname").val("");
			$("#nickname").focus();
			return false;
       }  else if($("#password").val()==""){
			alert("패스워드를 입력하세요!");
			return false;
		}else if(passwordflag==false){
	    	   $("#passwordConfirm").val("");
	    	   $("#passwordConfirm").focus();
	    	   return false;
	    }else if($("#email").val()==""){
			alert("e-mail 을 입력하세요!");
			return false;
		}
	}); // submit
		
		$("#nickname").keyup(function(){
			var nickname=$("#nickname").val();
			if(nickname.length<2 || nickname.length>10){
				$("#nicknameCheckView").html("<font color='pink'[2자리이상 10자리이하]</font>");
				return;
			} //if
			if(nickname==$("#sessionNickName").val()){
				$("#nicknameCheckView").empty();
			}else if(nickname!=$("#sessionNickName").val()){
			$.ajax({
				type:"POST",
				url:"checkNickname.ju",
				data:"nickname="+nickname,
				success:function(data){
			//	alert(data.flag);
					if(data.flag!=false){
						$("#nicknameCheckView").html("<font color='red'>"+nickname+" 사용불가</font>");
						nicknameflag=false;
					}else{
						$("#nicknameCheckView").html(nickname+" 사용가능합니다");
						nicknameflag=true;
					}
					status=data.flag;
				} //success
			}); //ajax
			} //if
		}); //keyup
		  //[1] passwordCheckView 레이어 클리어
        $('#password').keyup(function() {
            //$('#passwordCheckView').remove(); // 제거
            $('#passwordCheckView').text(''); // 클리어
        });

        //[2] 암호 확인 기능 구현
        $('#passwordConfirm').keyup(function(){
            if ($('#password').val() != $('#passwordConfirm').val()) {
                $('#passwordCheckView').text(''); // 클리어
                $('#passwordCheckView').html("<b><font color='red'>암호가 틀립니다</font></b>"); // 레이어에 HTML 출력
                passwordflag=false;
                return false;
            }
            else {
                $('#passwordCheckView').text(''); // 클리어
                $('#passwordCheckView').html("<b><font color='violet'>암호가 맞습니다</font></b>"); // 레이어에 텍스트 출력
                passwordflag=true;
            }
        });
        $("#file").change(function(){
      	  var file = $(this).prop("files")[0],
            reader = new FileReader();
		          reader.onload = function (event) {
		            var img = new Image();
		            img.src = event.target.result;
		            if (img.width > 150) { 
		              img.width = 150;
		            }
		            $("#thumbnailView").html("").append(img);
		          };
        reader.readAsDataURL(file);
        return false;
      });
     	     $("#resetImg").click(function(){
    // 	    $("#thumbnailView").empty();
        	$("#thumbnailView").html("").append("<img src='${initParam.root }${initParam.memberPhotoPath}/default.jpg' style=width:150px>");
        });  
}); //ready
</script>

</head>
<body>
<%-- <form action="${initParam.root}updateMember.ju" method="post" id="updateForm" enctype="multipart/form-data">
       <table style="border: 1px dashed #aaaaaa; width: 560px;" cellpadding="0" cellspacing="0" align="center">
        <h2 align="center"><br>회원정보 <br><br></h2>
        
              <tr height="45">  <td width="130" align="center">프로필사진</td>
         <td><div id="thumbnailView"><img src="${initParam.root }${initParam.memberPhotoPath}${sessionScope.mvo.picturePath }" width="150">
         <br>
			</div><div id="defaultImg"></div>
         </td></tr>
        
          <tr height="45"><td colspan="3" align="center"><input type="file" id="file" name="file" accept="image/*" style="border: 0"></td>
          <td><input type="reset" id="resetImg" value="프로필삭제"></td>
          </tr>
        
        <tr height="45">
         <td width="130" align="center">아이디</td>
         <td><input type="text"  size="20" id="id" name="id" value="${sessionScope.mvo.id }" readonly="readonly"></td>
        <td> <span id="idCheckView"></span></td>
       </tr>
       
               <tr height="45">
         <td width="90" align="center">닉네임</td>
         <td><input type="text"  size="20" id="nickname" name="nickname" value="${sessionScope.mvo.nickname }"></td>
         <td> <span id="nicknameCheckView"></span></td>
       </tr>

        <tr height="45">
         <td align="center">비밀번호</td>
         <td><input type="password" name="password" size="20" id="password"> </td>
        </tr>

       <tr height="45">
         <td align="center">비밀번호확인</td>
         <td><input type="password" name="passwordConfirm" size="20" id="passwordConfirm" ></td>
         <td> <span id="passwordCheckView"></span></td>
        </tr>

                <tr height="45">
         <td align="center">이메일</td>
         <td> <input type="text" id="email" name="email" value="${sessionScope.mvo.email }" size="20"></td>
        </tr>

         <tr align="center" style="background-color: #ccc;">
         <td colspan="3" height="30">
         <input type="hidden" name="picturePath" value="${sessionScope.mvo.picturePath }">
         <input type="submit" value="정보수정" id="update">
           <input type="reset" value="취소"></td>
        </tr>
       </table>
  </form> --%>
  
  <form class="form-horizontal"  action="${initParam.root}updateMember.ju" method="post" id="updateForm" enctype="multipart/form-data">
  <fieldset>
    <legend>회원정보</legend>
        <div class="form-group">
	  <label class="col-lg-2 control-label">프로필 사진</label>
	  <div class="col-lg-8">
	  <div class="border-lavener" id="thumbnailView"><img src="${initParam.root }${initParam.memberPhotoPath}${sessionScope.mvo.picturePath }" width="150">
		<div id="defaultImg"></div></div><br>
		<div class="row">
		<div class="col-md-6">
	    <input type="file"  id="file" name="file" accept="image/*"></div>
	    <div class="col-md-6">
	    <input type="reset" id="resetImg" value="프로필삭제"></div></div>
	  </div>
	</div>

<!-- <div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
 -->

      <div class="form-group">
      <label for="inputId" class="col-lg-2 control-label">ID</label>
      <div class="col-lg-8">
      <div id="idCheckView"></div>
        <input type="text" class="form-control" id="id" name="id" value="${sessionScope.mvo.id }" readonly="readonly">
      </div>
    </div>
    
    <div class="form-group">
      <label for="inputNickname" class="col-lg-2 control-label">닉네임</label>
      <div class="col-lg-8">
      <div id="nicknameCheckView"></div>
        <input type="text" class="form-control" id="nickname" name="nickname" value="${sessionScope.mvo.nickname }">
      </div>
    </div>
    
      <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">비밀번호</label>
      <div class="col-lg-8">
        <input type="password" class="form-control" id="password"  name="password" placeholder="password">
      </div>
    </div>
         <div class="form-group">
      <label for="inputPasswordConfirm" class="col-lg-2 control-label">비밀번호확인</label>
      <div class="col-lg-8">
      <div id="passwordCheckView"></div>
        <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="password Confirm">
      </div>
    </div>
         <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-8">
        <input type="text" class="form-control" id="email" name="email" placeholder="Email" value="${sessionScope.mvo.email }">
      </div>
    </div>
   <input type="hidden" name="sessionNickName" id="sessionNickName" value="${sessionScope.mvo.nickname }">
   <input type="hidden" name="picturePath" value="${sessionScope.mvo.picturePath }">
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
      <button class="btn btn-default" id="reset">취소</button>
      <button type="submit" class="btn btn-primary" id="update">정보수정</button>
      </div>
    </div>
  </fieldset>
</form>
</body>
</html>